﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
  <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <c:set var="ctx" value="${pageContext.request.contextPath}" />
    <html>

    <head>
      <link rel="stylesheet" href="${ctx}/common/common.css" />
      <title>采购统计</title>
      <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/layui/css/layui.css" media="all" />
      <link rel="stylesheet" href="${ctx}/common/plugins/layuiadmin/style/admin.css" media="all" />
      <script src="${ctx}/common/plugins/layuiadmin/layui/layui.js"></script>

      <script src="${ctx}/common/plugins/publicJs/publicJs.js"></script>
      <style>
        .layui-body {
          overflow-y: scroll;
        }

        .layui-input-block .layui-unselect {
          width: 100%;
        }
      </style>
    </head>

    <body>
      <!--主体内容层-->
      <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
          <div class="layui-col-md12 layui-col-space15">
            <form class="layui-form">
              <!--输入框内容盒子-->
              <div class="layui-col-md12">
                <!--输入框-->
                <div class="layui-col-md12">
                  <div class="layui-col-md4">
                    <label class="layui-form-label">起止时间</label>
                    <div class="layui-input-block">
                      <input type="text" name="name" id="purchaseTime" readonly placeholder="请选择起止时间"
                        class="layui-input" />
                    </div>
                  </div>

                  <div class="layui-col-md4">
                    <label class="layui-form-label">行政区域</label>
                    <div class="layui-input-block">
                      <div class="area-select-container" style="position: relative; width: 100%">
                        <div id="areaDiv" style="
                          display: block;
                          width: 100%;
                          height: 38px;
                          background: #fff;
                          line-height: 38px;
                          border: 1px solid #e6e6e6;
                          border-radius: 2px;
                          cursor: pointer;
                          position: relative;
                        ">
                          <span style="color: #999; margin-left: 10px">请选择行政区域</span>
                        </div>
                        <i class="layui-icon layui-icon-down" style="
                          position: absolute;
                          right: 10px;
                          top: 50%;
                          transform: translateY(-50%);
                          color: #999;
                          transition: transform 0.3s ease;
                          cursor: pointer;
                          pointer-events: auto;
                          z-index: 1;
                        " id="areaArrow"></i>
                        <i class="layui-icon layui-icon-close" style="
                          position: absolute;
                          right: 30px;
                          top: 50%;
                          transform: translateY(-50%);
                          color: #999;
                          cursor: pointer;
                          pointer-events: auto;
                          z-index: 1;
                          display: none;
                          font-size: 12px;
                        " id="areaClear" title="清空选择"></i>
                        <input type="hidden" id="area" name="area" />
                        <div class="areaTreeshow" style="
                          width: 100%;
                          max-height: 300px;
                          position: absolute;
                          top: 100%;
                          left: 0;
                          background: white;
                          z-index: 1000;
                          border: 1px solid #e6e6e6;
                          border-top: none;
                          border-radius: 0 0 2px 2px;
                          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                          display: none;
                          overflow: hidden;
                          overflow-y: auto;
                        ">
                          <ul id="areaTree"></ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="layui-col-md12" style="margin-top: 5px">
                  <div class="layui-col-md4">
                    <label class="layui-form-label">物料类型</label>
                    <div class="layui-input-block">
                      <select id="mType">
                        <option value="">请选择物料类型</option>
                        <option value="rawClassify">原料</option>
                        <option value="packagingClassify">包材</option>
                        <option value="accessoriesClassify">辅料</option>
                        <option value="additiveClassify">添加剂</option>
                      </select>
                    </div>
                  </div>
                  <div class="layui-col-md4">
                    <label class="layui-form-label">供应商</label>
                    <div class="layui-input-block">
                      <input type="text" id="supplierName" placeholder="请输入供应商" autocomplete="off"
                        class="layui-input" />
                    </div>
                  </div>
                </div>
              </div>
              <div class="layui-col-md12" style="margin-top: 5px">
                <!--输入框-->
                <div class="layui-col-md4">
                  <div class="layui-input-block">
                    <input type="hidden" id="productionCompanyId" />
                    <button type="button" class="layui-btn layui-btn-warm" id="prodictionButton">生产企业</button>
                    <span style="color: red; overflow-x: hidden" id="companyName"></span>
                  </div>
                </div>
              </div>
              <!--通用按钮盒子-->
              <div class="layui-col-md12" style="padding-top: 10px; padding-bottom: 10px">
                <div style="float: right" class="layui-btn-group paramBtn">
                  <button data-type="reloadProcess" type="button" class="layui-btn layui-btn-sm layui-btn-danger">
                    查询
                  </button>
                  <button data-type="resetProcess" type="reset" class="layui-btn layui-btn-sm layui-btn-danger">
                    重置
                  </button>
                </div>
              </div>
            </form>

            <table class="layui-table" id="purStatReload"
              lay-data="{ url:'${ctx}/purchaseStatistics/findPage', page:true,groups:5}" lay-filter="demo">
              <thead>
                <tr>
                  <th lay-data="{field:'code',sort:true}">订单编号</th>
                  <th lay-data="{field:'entName',sort:true,width:350}">生产企业</th>
                  <th lay-data="{field:'sName',sort:true}">供应商</th>
                  <th lay-data="{field:'cName',sort:true, templet: '#titleTpl'}">采购物料</th>
                  <th lay-data="{field:'supply_time',sort:true}">到货日期</th>
                  <!--   <th lay-data="{field:'contact',sort:true}">供应商联系人</th>
                    <th lay-data="{field:'phone',sort:true}">联系人电话</th> -->
                  <th lay-data="{field:'right',toolbar:'#barDemo',width:90}">收货记录</th>
                </tr>
              </thead>
            </table>
          </div>
        </div>
      </div>
      <script type="text/html" id="barDemo">
        {{# if(d.detailStat == '2'){ }}
        <a class="layui-btn layui-btn-xs" lay-event="view">查看</a>
        {{# } }} {{# if(d.detailStat == '1'){ }}
        <a class="layui-btn layui-btn-xs layui-btn-disabled">查看</a>
        {{# } }}
      </script>
      <script type="text/html" id="titleTpl">
        {{d.cName}}{{d.specifications}} {{# if(d.unit != ''){ }} * {{d.unit}} {{# } }}
      </script>
    </body>
    <script>
      layui.use(['tree', 'layer', 'table'], function () {
        var $ = layui.$;
        var loading = layer.msg("数据加载中...");
        var table = layui.table;
        table.render({
          done: function () {
            layer.close(loading);
          }
        })
        //监听filter为demo的table中的工具条
        table.on('tool(demo)', function (obj) {
          var data = obj.data;
          if (obj.event == 'view') {
            window.location.href = '${ctx}/purchaseStatistics/toRecipient?purDetailId=' + obj.data.id
          }
        });

        var $ = layui.$, active = {
          reloadProcess: function () {//条件查询
            table.reload('purStatReload', {
              where: {
                purchaseDate: $("#purchaseTime").val(),
                entIds: $("#productionCompanyId").val(),
                areaId: $("#area").val(),
                mClassily: $("#mType").val(),
                sName: $("#supplierName").val(),
              }
            });
          },
          resetProcess: function () {
            $("#productionCompanyId").val("")
            $("#companyName").html("")
            $("#mType").val("");
            $("#areaDiv").html('<span style="color: #999;margin-left:10px;">请选择行政区域</span>');
            $("#area").val("");
            $('.areaTreeshow').fadeOut();
            $('#areaArrow').css('transform', 'translateY(-50%) rotate(0deg)');
            $('#areaClear').hide(); // 隐藏清空按钮
            table.reload('purStatReload', {
              where: {
                purchaseDate: '',
                entIds: '',
                areaId: '',
                mClassily: '',
                sName: ''
              }
            })
          }
        };

        $('.demoTable .layui-btn').on('click', function () {
          var type = $(this).data('type');
          active[type] ? active[type].call(this) : '';
        });
        //给按钮绑定active中的方法
        $(".paramBtn .layui-btn").on("click", function () {
          var type = $(this).data('type');
          //查看是active这个json中是否有type这个方法，如果有调用，如果没有不知心；
          active[type] ? active[type].call() : '';
        })

        /**
         * 点击生产企业按钮
         */
        $("#prodictionButton").on("click", function () {
          layer.open({
            type: 2,
            title: '生产企业',
            shadeClose: true,
            offset: '10px',
            shade: 0.8,
            area: ['50%', '80%'],
            content: '${ctx}/productionDetection/queryEnterpriseAll?companyIds=' + $("#productionCompanyId").val() //iframe的url
          });
        })
        /* 区域树 */
        $('.area-select-container').click(function (e) {
          e.stopPropagation(); // 阻止事件冒泡
          if ($(".areaTreeshow").is(":hidden")) {
            $('.areaTreeshow').fadeIn();
            $('#areaArrow').css('transform', 'translateY(-50%) rotate(180deg)');
          } else {
            $('.areaTreeshow').fadeOut();
            $('#areaArrow').css('transform', 'translateY(-50%) rotate(0deg)');
          }
        });

        // 单独为箭头添加点击事件，确保箭头点击有效
        $('#areaArrow').click(function (e) {
          e.stopPropagation();
          e.preventDefault();
          if ($(".areaTreeshow").is(":hidden")) {
            $('.areaTreeshow').fadeIn();
            $(this).css('transform', 'translateY(-50%) rotate(180deg)');
          } else {
            $('.areaTreeshow').fadeOut();
            $(this).css('transform', 'translateY(-50%) rotate(0deg)');
          }
        });

        // 清空按钮点击事件
        $('#areaClear').click(function (e) {
          e.stopPropagation();
          e.preventDefault();
          // 清空选择
          $("#area").val('');
          $("#areaDiv").html('<span style="color: #999;margin-left:10px;">请选择行政区域</span>');
          $('.areaTreeshow').fadeOut();
          $('#areaArrow').css('transform', 'translateY(-50%) rotate(0deg)');
          $(this).hide(); // 隐藏清空按钮
        });

        // 点击其他地方关闭下拉框
        $(document).click(function (e) {
          // 检查点击是否在下拉框容器内，包括树形结构
          if (!$(e.target).closest('.area-select-container').length &&
            !$(e.target).closest('.areaTreeshow').length) {
            $('.areaTreeshow').fadeOut();
            $('#areaArrow').css('transform', 'translateY(-50%) rotate(0deg)');
          }
        });

        // 为树形结构添加点击事件处理，防止点击树形结构时关闭下拉框
        $('.areaTreeshow').click(function (e) {
          e.stopPropagation(); // 阻止事件冒泡到document
        });

        // 为树形结构内的所有元素添加点击事件处理
        $(document).on('click', '.areaTreeshow *', function (e) {
          e.stopPropagation(); // 阻止事件冒泡
        });

        layui.tree({
          elem: '#areaTree',
          nodes: ${ areaTree },
          click: function (node) {
            $("#area").val(node.id);
            $("#areaDiv").html('<span style="color: #333;margin-left:10px;">' + node.name + '</span>');
            $(".areaTreeshow").fadeOut();
            $('#areaArrow').css('transform', 'translateY(-50%) rotate(0deg)');
            $('#areaClear').show(); // 显示清空按钮
          }
           });

       });

      layui.use('laydate', function () {
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
          elem: '#purchaseTime'
          , range: true//指定元素
        });
      });
    </script>

    </html>